<template>
  <div style="position:relative;height: 100vh;background-color: white;">
    <div class="leftPanel">
      <router-view></router-view>
    </div>
    <div class="rightPanel">
      <div style="width: 100%;padding-top: 10px;">
        <div :class="['itemd',activeTab===item.page?'active':'']"  v-for="(item,index) in items" :key="index" @click="toPage(item.page, item.title)">{{item.title}}</div>
        <div :class="['itemd']" @click="exitLogin">系统设置</div>
      </div>
    </div>
  </div>
    <el-dialog v-model="show" title="系统设置" :width="300">
      <div class="logout">
        <div style="padding: 50px;">
          <lbtn  type="danger" @click="logout" style="width: 150px;height: 50px;" >退出系统</lbtn >
        </div>
        <div style="padding: 50px;">
          <lbtn  type="primary" @click="setPrint" style="width: 150px;height: 50px;" >设置打印机</lbtn >
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="showPrintPop" title="设置打印机" :width="700" height="550">
      <div style="padding: 10px 0;font-size: 1.1em;">设置所有要用到的打印机名称，1 行代表一台配送设备</div>
      <div class="printer">
        <table>
          <thead>
          <tr>
            <th>新增</th>
            <th>小票打印机名称</th>
            <th>单据打印机名称</th>
            <th>删除</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in printList" :key="'p'+index">
            <td class="icon">
              <el-button link icon="ele-Plus"  @click="addOne"></el-button>
            </td>
            <td>
              <ltext :width="220" v-model="item.sendPrintName" />
            </td>
            <td>
              <ltext :width="220" v-model="item.salePrintName" />
            </td>
            <td class="icon">
              <el-button link icon="ele-Delete"  @click="delOne(index)"></el-button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div style="text-align: center;padding-top:30px;">
        <lbtn size="large" style="width: 200px;" type="primary"  @click="savePrint" >保存</lbtn >
      </div>
    </el-dialog>
</template>

<script>

// 配送首页菜单
import tool from "@/utils/tool";
export default {
  name: "deliverMenu",
  data () {
    return {
      show: false,
      topHeight: 100,
      showPrintPop: false,
      printList: [],
      activeTab: 'cargoquick',
      itemHeight: 70,
      items: [
        {page: 'cargoquick', title: '扫码装车'},
        {page: 'waitToGo', title: '待派送'},
        {page: 'wrapperBack', title: '退包装物'},
        {page: 'sale', title: '零售开单'},
        {page: 'stj', title: '扫码统计'},
        {page: 'chtj', title: '出货统计'},
      ]
    }
  },
  created() {
    let deliver = tool.data.getUser()
    let token = tool.Session.get('token')
    if (!deliver || !token) {
      this.$router.replace({name: 'login'})
    }
  },
  methods: {
    setPrint () {
      tool.post('deliver/getPrintName', {}).then(ret => {
        if (ret.stat) {
          if (ret.data.length === 0) {
            this.printList.push({sendPrintName: '', salePrintName: ''})
          } else {
            this.printList = ret.data
          }
          this.showPrintPop = true
        }
      })
    },
    addOne () {
      this.printList.push({name: ''})
    },
    delOne (index) {
      if (index === 0) return tool.err('至少1行')
      this.printList.splice(index, 1)
    },
    savePrint () {
      tool.post('deliver/savePrintName', {list: this.printList}).then(ret => {
        if (ret.stat) {
          this.showPrintPop = false
        }
      })
    },
    toPage (page, title) {
      this.activeTab = page
      this.$router.push({name: page, query: {title: title, page: page}})
    },
    // 退出登录
    exitLogin () {
      this.show = true
    },
    logout () {
      let userAgent = navigator.userAgent.toLowerCase()
      if (userAgent.indexOf(' electron/') > -1){
        window.close()
      }
      else {
        this.changeUser()
      }

    },
    changeUser () {
      tool.data.logout()
      tool.Session.clear()
      this.$router.replace({name: 'login'})
    }
  }
}
</script>

<style scoped lang="scss">
.leftPanel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 100px;
  padding: 10px;
  box-sizing: border-box;
}
.rightPanel {
  //border-left: var(--el-border);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background-color: rgba(0,0,0,0.02);
}
.itemd {
  height: 70px;
  line-height: 70px;
  padding-left: 5px;
  border-bottom: var(--el-border);
  font-weight: bolder;
  color: #8a8f97;
  font-size: 18px;
  text-align: center;
  &:hover{
    cursor: pointer;
    background-color: #2b85e4;
    color: white;
  }
  &.active {
    background-color: #2b85e4;
    color: white;
  }
}
</style>
